<template>
	<div class="film_list_wrap">
		<div class="list_nav">
			<div @click="hotMove" class="now_playing" v-bind:class="{ choosing: isActive1}">

				正在热映
			</div>
			<div @click="Release" class="coming_soon" v-bind:class="{ choosing: isActive2}">
				即将上映
			</div>
		</div>
		<div class="film-list">
			<ul v-show="hot">
				<li v-for="item in cur_play">
					<router-link :to="'/moveDetails/'+item.id">
						<div class="film-item">
							<div class="film_img">
								<myimg :src="item.poster.origin"></myimg>
							</div>
							<div class="film-desc">
								<div class="film-next-arrow">
									>
								</div>
								<div class="film-grade">{{item.grade}}</div>
								<div class="film-name">{{item.name}}</div>
								<div class="film-intro">{{item.intro}}</div>
								<div class="film-counts">
									<span class="film-count-color1">{{item.cinemaCount}}</span>
									<span>家影院上映&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
									<span class="film-count-color1">{{item.watchCount}}</span>
									<span>人购票 </span>
								</div>
							</div>
						</div>
					</router-link>
				</li>

			</ul>
			<ul v-show="res">
				<li v-for="item in cur_hot">
					<router-link :to="'/moveDetails/'+item.id">
						<div class="film-item">
							<div class="film_img">
								<myimg :src="item.poster.origin"></myimg>
							</div>
							<div class="film-desc">
								<div class="film-next-arrow">
									>
								</div>
								<div class="film-grade">{{item.grade}}</div>
								<div class="film-name">{{item.name}}</div>
								<div class="film-intro">{{item.intro}}</div>
								<div class="film-counts">
									<!--<span class="film-count-color1">{{item.cinemaCount}}</span>-->
									<span class="sydy">6月24日上映&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
									<!--<span class="film-count-color1">{{item.watchCount}}</span>-->
									<span class="sydy">星期五</span>
								</div>
							</div>
						</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import myimg from "./myimg";
	import router from "../js/router";
	export default {
		name: "hotMove",
		data() {
			return {
				hot: true,
				res: false,
				isActive1: true,
				isActive2: false,
			}
		},
		props: ["cur_play", "cur_hot", "id"],
		components: {
			myimg,
		},
		methods: {
			hotMove() {
				this.hot = true;
				this.res = false;
				this.isActive1 = true;
				this.isActive2 = false;
			},
			Release() {
				this.hot = false;
				this.res = true;
				this.isActive1 = false;
				this.isActive2 = true;
			},
			//			
			//			tiao(id){
			//				this.$router.push("/moveDetails/"+id);
			//			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.film_list_wrap {
		box-sizing: border-box;
		padding-left: 15px;
		padding-right: 15px;
		background-color: #f9f9f9;
		width: 100%;
		position: absolute;
		min-height: 100%;
		.list_nav {
			height: 46px;
			margin: 0 auto;
			border-bottom: 1px solid #fe6e00;
			.choosing {
				color: #fe6e00 !important;
				border-bottom: solid;
			}
			.choosing2 {
				color: #fe6e00 !important;
				border-bottom: solid;
			}
			.now_playing {
				float: left;
				width: 50%;
				height: 100%;
				text-align: center;
				font-size: 16px;
				line-height: 46px;
				color: #6a6a6a;
				cursor: pointer;
			}
			.coming_soon {
				float: left;
				width: 50%;
				height: 100%;
				text-align: center;
				font-size: 16px;
				line-height: 46px;
				color: #6a6a6a;
				cursor: pointer;
			}
		}
		.film-list {
			.film-item {
				width: 100%;
				padding: 20px 0;
				border-bottom: 1px dashed #c9c9c9;
				cursor: pointer;
			}
			.film_img {
				width: 19%;
				float: left;
				overflow: hidden;
			}
			.film-desc {
				padding-left: 15px;
				display: inline-block;
				width: 75%;
				.film-next-arrow {
					float: right;
					line-height: 66px;
					color: #c6c6c6;
				}
				.film-grade {
					float: right;
					font-size: 16px;
					line-height: 66px;
					color: #fc7103;
				}
				.film-name {
					font-size: 16px;
					line-height: 32px;
					color: #000;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.film-intro {
					line-height: 24px;
					color: #8e8e8e;
					font-size: 12px;
				}
				.film-counts {
					line-height: 33px;
					color: #8e8e8e;
					font-size: 13px;
					.sydy {
						color: #ffb375;
					}
				}
			}
		}
	}
</style>